import React, {Component} from 'react';
import { Icon, Button, Input, Select, Form, message, Row, Col, DatePicker } from 'antd';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux';
import '@/common/css/index.less'
import moment from 'moment';
import { updateProposal } from '../action';

const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD HH:mm:ss';
const { TextArea } = Input;

const mapStateToProps = state => ({
    data: state.suggest.data
})

const mapDispatchToProps = dispatch => bindActionCreators({
    onUpdateProposal: updateProposal
}, dispatch);


class EditSuggestForm extends Component {
    constructor(props){
        super(props);

    }

    componentDidMount = () => {
        // console.log(this.props.data)
    }

    editSubmit = () => {
		const { form, data } = this.props;
	    form.validateFields((err, values) => {
            if (err) {  return; }
        //   console.log('Received values of form: ', values);
            let _data = {
                contactPhone:values.contactPhone,
                content:values.content,
                created_at:moment(values.created_at._d).format('YYYY-MM-DD HH:mm:ss'),
                proposalPersonDeptName:values.proposalPersonDeptName,
                subject:values.subject,
                proposalPersonName: values.proposalPersonName
            }

            this.props.onUpdateProposal(data.id, _data)//修改接口

            // form.resetFields()
              
	    });
	}

    render(){
        const { form, data } = this.props;
        const { getFieldDecorator } = form;
        const formItemLayout = {
            labelCol: {lg: { span: 6 },xs: { span: 18 },sm: { span: 8 },},
            wrapperCol: {lg: { span: 18 },xs: { span: 24 },sm: { span: 12 },},
        };

        return (
            <Form>
                <Row>
                    <Col span={10}>
                        <FormItem {...formItemLayout} hasFeedback label="建议标题" >
                            {getFieldDecorator('subject', {
                                initialValue: data.subject,
                                rules: [{ required: true, message: '请填写标题' }],
                            })(
                                <Input />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={20}>
                        <Col span={12}>
                            <FormItem {...formItemLayout}  label="建议日期">
                                {getFieldDecorator('created_at', {
                                    initialValue: moment(data.created_at,dateFormat),
                                    rules: [{ type: 'object', required: true, message: '请选择时间！' }]
                                })(
                                    <DatePicker
                                        format={dateFormat}
                                        disabled
                                    />
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout} hasFeedback label="建议人" >
                                {getFieldDecorator('proposalPersonName', {
                                    initialValue: data.proposalPersonName,
                                    rules: [{ required: true, message: '请输入建议人' }],
                                })(
                                    <Input />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} hasFeedback label="所属部门" >
                                {getFieldDecorator('proposalPersonDeptName', {
                                    initialValue: data.proposalPersonDeptName,
                                    rules: [{ required: true, message: '请选择部门' }],
                                })(
                                    <Input />
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout} hasFeedback label="联系电话" >
                                {getFieldDecorator('contactPhone', {
                                    initialValue: data.contactPhone,
                                    rules: [{ required: true, message: '请输入电话号码' }],
                                })(
                                    <Input />
                                )}
                            </FormItem>
                        </Col>       
                    </Col>
                </Row>
                <Row>
                    <Col span={10}>
                        <FormItem {...formItemLayout} hasFeedback label="建议内容" >
                            {getFieldDecorator('content', {
                                initialValue: data.content,
                                rules: [{ required: true, message: '请填写500个字以内的内容',pattern:/^.{0,500}$/  }],
                            })(
                                <TextArea autosize={{ minRows: 8, maxRows: 12 }} placeholder="请输入建议的内容、建议的原由、解决措施或建议"/>
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout} hasFeedback label="附件" >
                            
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <FormItem style={{textAlign:'center'}}>
                            <Button type="primary" onClick={this.editSubmit}>保存</Button>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        )
    }
}

EditSuggestForm.PropTypes = {
    data: PropTypes.object.isRequired,
    onUpdateProposal: PropTypes.func.isRequired
}

export default connect(mapStateToProps,mapDispatchToProps)(Form.create()(EditSuggestForm));